<template>
    <page-header-wrapper :title="false">
      <a-card
        title="未开单顾问列表"
      >
<!--        <div class="table-page-search-wrapper">-->
<!--          <a-form-model :model="queryParam" layout="inline">-->
<!--            <a-row :gutter="10">-->
<!--              <a-col :md="6" :sm="24">-->
<!--                <a-form-model-item label="入职时间">-->
<!--                  <a-range-picker @change="onChange" />-->
<!--                </a-form-model-item>-->
<!--              </a-col>-->
<!--              <a-col :md="6" :sm="24">-->
<!--              <span class="table-page-search-submitButtons">-->
<!--                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>-->
<!--              </span>-->
<!--              </a-col>-->
<!--            </a-row>-->
<!--          </a-form-model>-->
<!--        </div>-->
<!--        <div slot="extra">-->
<!--          <a-select default-value="3">-->
<!--            <a-select-option value="3">-->
<!--              3天未开单-->
<!--            </a-select-option>-->
<!--            <a-select-option value="5">-->
<!--              5天未开单-->
<!--            </a-select-option>-->
<!--            <a-select-option value="10">-->
<!--              10天未开单-->
<!--            </a-select-option>-->
<!--          </a-select>-->
<!--        </div>-->
<!--        <div class="table-page-search-wrapper">-->
<!--          <a-form-model :model="queryParam" layout="inline">-->
<!--            <a-row :gutter="60">-->
<!--              &lt;!&ndash;              <a-col :md="6" :sm="24">&ndash;&gt;-->
<!--              &lt;!&ndash;                <a-form-model-item label="组长姓名">&ndash;&gt;-->
<!--              &lt;!&ndash;                  <a-select&ndash;&gt;-->
<!--              &lt;!&ndash;                    show-search&ndash;&gt;-->
<!--              &lt;!&ndash;                    v-model="queryParam['lid']"&ndash;&gt;-->
<!--              &lt;!&ndash;                    placeholder="选择组长姓名"&ndash;&gt;-->
<!--              &lt;!&ndash;                    :filter-option="filterOption"&ndash;&gt;-->
<!--              &lt;!&ndash;                  >&ndash;&gt;-->
<!--              &lt;!&ndash;                    <a-select-option v-for="(item,index) in adviserOpts" :key="index" :value="index">{{item}}</a-select-option>&ndash;&gt;-->
<!--              &lt;!&ndash;                  </a-select>&ndash;&gt;-->
<!--              &lt;!&ndash;                </a-form-model-item>&ndash;&gt;-->
<!--              &lt;!&ndash;              </a-col>&ndash;&gt;-->
<!--              <a-col :md="6" :sm="24">-->
<!--                <a-form-model-item label="顾问姓名">-->
<!--                  <a-select-->
<!--                    show-search-->
<!--                    v-model="queryParam['adviser_uid']"-->
<!--                    placeholder="选择顾问姓名"-->
<!--                    :filter-option="filterOption"-->
<!--                  >-->
<!--                    <a-select-option v-for="(item,index) in adviserOpts" :key="index" :value="index">{{item}}</a-select-option>-->
<!--                  </a-select>-->
<!--                </a-form-model-item>-->
<!--              </a-col>-->
<!--              <a-col :md="6" :sm="24">-->
<!--              <span class="table-page-search-submitButtons">-->
<!--                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>-->
<!--              </span>-->
<!--              </a-col>-->
<!--            </a-row>-->
<!--          </a-form-model>-->
<!--        </div>-->
        <a-tabs v-model="activeKey" type="card" @change="onTabs">
          <a-tab-pane key="3" tab="3天未开单"></a-tab-pane>
          <a-tab-pane key="5" tab="5天未开单"></a-tab-pane>
          <a-tab-pane key="10" tab="10天未开单"></a-tab-pane>
        </a-tabs>
        <s-table
          bordered
          ref="table"
          :row-key="(record) => record.uid"
          :columns="unpayColumns"
          :data="unpayData"
        >
          <div
            slot="filterSelect"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            style="padding: 8px"
          >
            <a-select
              show-search
              :placeholder="`选择${column.title}`"
              style="width: 188px; margin-bottom: 8px; display: block;"
              :value="selectedKeys[0]"
              :filter-option="filterOption"
              @change="(value) => setSelectedKeys(value ? [value] : [])"
              @pressEnter="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
            >
              <a-select-option v-for="(item,index) in adviserOpts" :key="index" :value="index">{{item}}</a-select-option>
            </a-select>
            <a-button
              type="primary"
              icon="search"
              size="small"
              style="width: 90px; margin-right: 8px"
              @click="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
            >
              搜索
            </a-button>
            <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
              重置
            </a-button>
          </div>
          <div
            slot="filterRange"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            style="padding: 8px"
          >
            <a-range-picker
              style="width: 228px; margin-bottom: 8px; display: block;"
              :value="createValue"
              @change="onChange"
            />
            <a-button
              type="primary"
              icon="search"
              size="small"
              style="width: 110px; margin-right: 8px"
              @click="() => handleRange(selectedKeys, confirm, column.dataIndex)"
            >
              搜索
            </a-button>
            <a-button size="small" style="width: 110px" @click="() => rangeReset(clearFilters)">
              重置
            </a-button>
          </div>
          <template slot='group_type' slot-scope='text'>
            {{text === 'pt' ? '专利' : text === 'sh' ? '售后' : '商标'}}
          </template>
          <template slot='adviser_name' slot-scope='text, record'>
            <div v-html="record.adviser_name"></div>
          </template>
          <template slot="leader_name" slot-scope="text">
            <a-tag color="blue">{{text}}</a-tag>
          </template>
          <template slot="adviser_name" slot-scope="text">
            <a-tag color="blue">{{text}}</a-tag>
          </template>
          <template slot="hire_day" slot-scope="text">
            <a-tag color="red">{{text}}</a-tag>
          </template>
          <template slot="action" slot-scope="text, record">
            <a-button size="small" type="primary" @click="toDetail(record.uid)">详情</a-button>
          </template>
        </s-table>
      </a-card>
    </page-header-wrapper>
</template>

<script>
  import { STable } from '@/components'
  import col from '@/columns/leader'
  import { getUnpaidAdviser } from '@/api/leader'
  // const unpayColumns = col.unpay

  export default {
    components: {
      STable
    },
    name: 'MemberBilled',
    data () {
      return {
        unpayColumns: col.wkd,
        unpayData: parameters => {
          return getUnpaidAdviser(Object.assign(parameters, this.queryParam)).then(res => {
            this.adviserOpts = res.result.adviser_array
            return res.result
          })
        },
        queryParam: {},
        activeKey: '3',
        adviserOpts: {},
        createValue: []
      }
    },
    activated () {
      if (!this.isEmptyObject(this.$route.query)) {
        this.activeKey = (this.$route.query.day).toString()
        if (this.$route.query.day === 3) {
          this.queryParam['filter[type]'] = 'three'
        }
        if (this.$route.query.day === 5) {
          this.queryParam['filter[type]'] = 'five'
        }
        if (this.$route.query.day === 10) {
          this.queryParam['filter[type]'] = 'ten'
        }
        this.$refs.table.refresh(true)
      }
    },
    created () {
      this.activeKey = '3'
      this.queryParam['filter[type]'] = 'three'
    },
    methods: {
      onChange (date, dateString) {
        this.createValue = date
        this.queryParam['filter[begin_hiredate_time]'] = dateString[0]
        this.queryParam['filter[end_hiredate_time]'] = dateString[1]
      },
      handleSelect (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
      },
      handleRange (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.$refs.table.refresh(true)
      },
      rangeReset (clearFilters) {
        clearFilters()
        this.createValue = []
        delete this.queryParam['filter[begin_hiredate_time]']
        delete this.queryParam['filter[end_hiredate_time]']
        this.$refs.table.refresh(true)
      },
      handleReset (clearFilters, dataIndex) {
        clearFilters()
        delete this.queryParam['filter[' + dataIndex + ']']
      },
      filterOption (input, option) {
        return (option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0)
      },
      toDetail (id) {
        this.$router.push({ name: 'MemberDetail', params: { id: id } })
      },
      onTabs (key) {
        this.activeKey = key
        if (key === '3') {
          this.queryParam['filter[type]'] = 'three'
        }
        if (key === '5') {
          this.queryParam['filter[type]'] = 'five'
        }
        if (key === '10') {
          this.queryParam['filter[type]'] = 'ten'
        }
        this.$refs.table.refresh(true)
      },
      isEmptyObject (obj) {
        for (const k in obj) {
          return false
        }
        return true
      }
    }
  }
</script>

<style scoped>

</style>
